@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  * {
    @apply border-gray-200 dark:border-gray-700;
  }
  
  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
  
  body {
    @apply bg-gradient-to-br from-gray-50 via-white to-gray-50 dark:from-gray-950 dark:via-gray-900 dark:to-gray-950 text-gray-900 dark:text-gray-100;
    background-attachment: fixed;
    overflow-x: hidden;
    max-width: 100vw;
  }
}

@layer components {
  /* 按钮样式 - 精致版 */
  .btn {
    @apply px-5 py-2.5 rounded-md font-medium text-sm transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 inline-flex items-center justify-center gap-2;
  }
  
  .btn-primary {
    @apply bg-gradient-to-r from-primary-600 to-purple-600 text-white shadow-md shadow-primary-500/30 hover:shadow-lg hover:shadow-primary-600/40 hover:from-primary-700 hover:to-purple-700 active:from-primary-800 active:to-purple-800;
  }
  
  .btn-secondary {
    @apply bg-white dark:bg-gray-800 text-primary-600 dark:text-primary-400 border border-primary-600 dark:border-primary-400 shadow-sm hover:bg-primary-50 dark:hover:bg-gray-700 hover:shadow-md;
  }
  
  .btn-ghost {
    @apply bg-transparent text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800;
  }

  .btn-outline {
    @apply bg-transparent border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:border-primary-600 dark:hover:border-primary-400 hover:text-primary-600 dark:hover:text-primary-400 hover:bg-primary-50 dark:hover:bg-gray-800;
  }

  .btn-success {
    @apply bg-gradient-to-r from-green-500 to-emerald-600 text-white shadow-md shadow-green-500/30 hover:shadow-lg hover:shadow-green-600/40 hover:from-green-600 hover:to-emerald-700;
  }

  .btn-danger {
    @apply bg-gradient-to-r from-red-500 to-pink-600 text-white shadow-md shadow-red-500/30 hover:shadow-lg hover:shadow-red-600/40 hover:from-red-600 hover:to-pink-700;
  }

  /* 按钮尺寸变体 */
  .btn-xs {
    @apply px-3 py-1.5 text-xs rounded;
  }

  .btn-sm {
    @apply px-4 py-2 text-sm rounded;
  }

  .btn-md {
    @apply px-5 py-2.5 text-sm rounded-md;
  }

  .btn-lg {
    @apply px-6 py-3 text-base rounded-md;
  }

  .btn-xl {
    @apply px-8 py-4 text-lg rounded-lg;
  }

  /* 卡片样式 - 优化版 */
  .card {
    @apply bg-white/90 dark:bg-gray-800/90 backdrop-blur-sm rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 overflow-hidden hover:shadow-xl transition-all duration-300;
  }

  .card-hover {
    @apply card hover:border-primary-500 dark:hover:border-primary-400 hover:-translate-y-1 hover:shadow-2xl transition-all duration-300;
  }
  
  /* 玻璃态卡片 */
  .card-glass {
    @apply bg-white/60 dark:bg-gray-800/60 backdrop-blur-md border border-white/20 dark:border-gray-700/50 shadow-xl rounded-2xl;
  }

  /* 输入框样式 - 优化版 */
  .input {
    @apply w-full px-4 py-3 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:border-primary-500 dark:focus:border-primary-400 focus:ring-4 focus:ring-primary-500/20 dark:focus:ring-primary-400/20 transition-all duration-200 placeholder:text-gray-400 dark:placeholder:text-gray-500;
  }

  /* 标签样式 */
  .tag {
    @apply inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors cursor-pointer;
  }
}

@layer utilities {
  /* 自定义滚动条 */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  
  .scrollbar-thin::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800 rounded-full;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb {
    @apply bg-gradient-to-b from-primary-400 to-purple-600 rounded-full;
  }
  
  .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    @apply from-primary-500 to-purple-700;
  }

  /* 渐变文字 */
  .gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-primary-600 via-purple-600 to-pink-600;
    animation: gradient-shift 3s ease infinite;
  }
  
  @keyframes gradient-shift {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

  /* 渐变背景 */
  .gradient-bg {
    @apply bg-gradient-to-br from-primary-500 via-purple-500 to-pink-500;
    background-size: 200% 200%;
  }

  /* 玻璃态效果 */
  .glass {
    @apply backdrop-blur-md bg-white/70 dark:bg-gray-900/70 border border-white/20 dark:border-gray-700/50;
  }
  
  /* 发光效果 */
  .glow {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
  }
  
  .glow-green {
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5);
  }
  
  /* 动画 */
  .animate-fade-in {
    animation: fadeIn 0.6s ease-in-out;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-slide-up {
    animation: slideUp 0.5s ease-out;
  }
  
  @keyframes slideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
  
  /* 文本截断 */
  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}


